<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      width: 500px;
      margin: 0 auto;
    }

    p {
      background: aqua;
      border: 3px solid blue;
      padding: 10px;
      margin: 10px;
    }

    span {
      background: red;
      border: 1px solid black;
    }

    /*
    绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。
    这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的 UI 功能。
    例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的 UI 功能
    */
    .positioned {
      position: absolute;
      background: yellow;
      top: 30px; /*指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向*/
      left: 30px;
    }
    /*
    哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的 position 属性
    如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static。
    结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。
    简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。
    */
    /*
    绝对定位元素在 HTML 源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面 (而不是<body>) 的左边界、上边界有 30px 的距离。
    我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素
    （如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。
    为了演示这一点，将以下声明添加到你的 body 规则中：
    */
    body {
      position: relative; /* 绝对定位的元素现在相对于<body>元素定位,即body是包含元素 */
    }
  </style>
</head>

<body>
  <div>
    <h1>Basic document flow</h1>

    <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

    <p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child
      content. Our total
      width and height is our content + padding + border width/height.</p>

    <p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our
      margins, not both.</p>

    <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and
      adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new
        line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this
      image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
  </div>
</body>

</html>